<template>
  <div class="com-oauth-userinfo w-flex-center">
    <span :style="$bgImage(userIcon)" class="icon w-image-fit">
      <svgicon v-if="userType === 0" name="qq" class="platform" />
      <svgicon v-if="userType === 1" name="github" class="platform" />
    </span>
    <p class="user-name">
      {{ userName }}
    </p>
    <a-icon class="close w-pointer" type="close" @click="closeBtnClick"/>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import '@/icons/qq'
import '@/icons/github'
import { OAuth } from '@/config/api'

@Component({
  name: 'ComOAuthUserInfo'
})
export default class Com extends Vue {
  @Getter('oauth/ICON') userIcon!: string
  @Getter('oauth/TYPE') userType!: number
  @Getter('oauth/NAME') userName!: string

  /**
   * 退出按钮点击
   */
  closeBtnClick () {
    this.$confirm({
      title: '退出登录',
      content: '确定要退出登录嘛？',
      onOk: () => {
        this.$wAxios
          .$get(OAuth.logout)
          .then(() => {
            this.$store.commit('oauth/OAUTH_SET_USER_DATA', null)
            this.$message.success('退出成功')
          })
          .catch(() => {
            this.$message.error('退出失败')
          })
      }
    })
  }
}
</script>

<style scoped lang="less">
.com-oauth-userinfo {
  margin-top: 50px;
  height: 200px;
  flex-direction: column;
  .icon {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 5px;
    .platform {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 40px;
      height: 40px;
      fill: rgba(231, 105, 151, 0.8);
      border: 2px solid rgba(231, 105, 151, 0.8);
      border-radius: 50%;
      padding: 4px;
    }
  }
  .user-name {
    font-size: 40px;
    color: #ccc;
    margin-top: 10px;
  }
  .close {
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 40px;
    color: #ddd;
  }
  .close:hover {
    color: rgb(226, 4, 28);
  }
}
</style>
